<template>
<div class="box">
	<h4>品牌制造商</h4>
	<div class="box-con">
		<ul>
			<li  v-for="item in brandList" :key="item.id">
				<img :src="item.pic_url">
				<h5>{{item.name}}</h5>
				<p class="pb">￥{{item.floor_price}}元</p>
			</li>
		</ul>
	</div>

	<h4>周一周四·新品首发</h4>
	<div class="box-con1">
		<ul>
			<li  v-for="item in newGoodsList" :key="item.id">
				<img :src="item.list_pic_url">
				<p>{{item.name}}</p>
				<p>￥{{item.retail_price}}.00元</p>
			</li>
		</ul>
	</div>

	<h4>人气推荐</h4>
	<div class="box-con2" v-for="item in hotGoodsList" :key="item.id">
		<div class="left">
			<img :src="item.list_pic_url">
		</div>
		<div class="right">
			<div class="right-con1">
				<p>{{item.name}}</p>
				<p>{{item.goods_brief}}</p>
			</div>
			<div class="right-con2">￥{{item.retail_price}}.00元</div>
		</div>
	</div>

	<h4>专题精选</h4>
	<div class="lunbo">
		<van-swipe :loop="false" :width="300" :show-indicators="false">
			<van-swipe-item v-for="item in topicList" :key="item.id">
				<img :src="item.item_pic_url">
				<h2>
					{{item.title}}
					<span>￥ {{item.price_info}} 元起</span>
				</h2>
				<p>{{item.subtitle}}</p>
			</van-swipe-item>
		</van-swipe>
	</div>



</div>
</template>

<script>
export default {
	props:['brandList','newGoodsList','hotGoodsList','topicList']
}
</script>
<style scoped>

.box>h4{
	text-align: center;
	line-height: 60px;
	margin-top: 20px;
	font-weight: 400;
}
/* 品牌制造商 */
.box-con>ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.box-con>ul>li{
	max-width: 49%;
}
.box-con>ul>li>img{
	width: 100%;
}
.box-con>ul>li{
	position: relative;
	font-size: 16px;
}
.box-con>ul>li>h5{
	position: absolute;
	top: 16px;
	left: 16px;
}
.box-con>ul>li>p{
	position: absolute;
	top: 40px;
	left: 16px;
	color:brown;
}

/* 新品首发 */
.box-con1>ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.box-con1>ul>li{
	max-width: 49%;
}
.box-con1>ul>li>img{
	width: 100%;
}
.box-con1>ul>li{
	position: relative;
	font-size: 16px;
}
.box-con1>ul>li>h5{
	position: absolute;
	top: 16px;
	left: 16px;
}
.box-con1>ul>li>p{
	text-align: center;
	font-size: 16px;
	line-height: 30px;
}
.box-con1>ul>li>p:nth-child(3){
	color:brown;
}
/* 人气推荐 */
.box-con2{
	display: flex;
}
.left{
	max-width: 108px;
	padding: 10px;
	box-sizing: border-box;
}
.left>img{
	width: 100%;
}
.right-con1>p:nth-child(1){
	font-size: 18px;
	line-height: 30px;
}
.right-con1>p:nth-child(2){
	font-size: 12px;
	line-height: 40px;
}
.right-con2{
	font-size: 12px;
	color: #8d0000;
}
/* 专题精选 */
.lunbo{
	margin: 0 8px;
}
.van-swipe-item{
	max-width: 300px;
}
.van-swipe-item img{
	width: 300px;
	height: 200px;
}
.van-swipe__track>div:nth-child(2){
	margin: 0 10px;
}
.van-swipe-item h2,p{
	width: 90%;
	font-size: 16px;
	text-overflow:ellipsis;
	overflow: hidden;
	white-space:nowrap;
}
.van-swipe-item h2{
	line-height: 40px;
}
.van-swipe-item h2 span{
	color: darkred;
	font-style:normal;
	font-weight:400;
}
</style>